<style scoped>

</style>
<template>
    <div>
        <div class="top-title bg-white">
            <div class="top-title-text black blod" style="font-size:22px;">角色管理</div>
        </div>
        <div class="page-content flex-column bg-white" style="height: calc(100% - 50px);">




            <div class="flex m-b-20" style="height: calc(100% - 50px)">

                <div style="width: 100%">
                    <div class="search-block bg-white p-10">
                        <Form inline :label-width="90">
                            <FormItem :label-width="0">
                                <Button @click="addItem" class="m-r-10" type="primary"><img src="assets/image/add.png">新增</Button>
                            </FormItem>
                        </Form>
                    </div>
                    <div class="p-10" style="padding-top:0;">

                        <div id="mainContent" class="">

                            <div class="">
                                <Table height="500"
                                       :columns="columns"
                                       :data="roleList"
                                >
                                </Table>
                            </div>

                        </div>

                    </div>

                </div>
            </div>

        </div>


        <Modal v-model="itemModal"
               :title="itemData.id? '编辑角色': '新增角色'"
               class-name="vertical-center-modal"
               width="600"
        >
            <div class="p-l-20">
                <div class="top-title-text text-18 black blod">基础信息</div>
                <div class="p-15-0 max-h500">
                    <Form label-position="top">

                        <FormItem label="角色名称" required>
                            <Input v-model="itemData.role_name" class="w320" type="text" placeholder="请输入"/>
                        </FormItem>

                        <FormItem label="角色说明" required>
                            <Input v-model="itemData.role_remark" class="w320" type="textarea" placeholder="请输入"/>
                        </FormItem>
                    </Form>

                </div>
            </div>

            <div slot="footer">
                <Button @click="itemModal = false" class="m-r-10">取消</Button>
                <Button @click="confirm" type="primary">确定</Button>
            </div>
        </Modal>

    </div>
</template>

<script>

    export default {
        data() {
            return {
                search: {
                    str: '',
                },

                tableHeight: 500,

                detail: {},
                list: [],

                itemModal: false,
                itemData: {
                    "role_name": "",
                    "role_remark": "",
                },


                total: 0,
                page: 1,
                pageSize: 10,

                roleList: [],
                userList: [
                    {
                        status: true,
                    }
                ],
                columns: [
                    {
                        title: '角色名称',
                        key: 'role_name'
                    },
                    {
                        title: '角色说明',
                        key: 'role_remark'
                    },
                    {
                        title: '操作',
                        width: 190,
                        render: (h, params) => {
                            let edit = h('a', {
                                class: 'm-r-10',
                                on: {
                                    click: () => {
                                        console.log('编辑', params.row);
                                        this.editItem(params.row);
                                    }
                                }
                            }, '编辑');
                            let del = h('a', {
                                class: 'red m-r-10',
                                on: {
                                    click: () => {
                                        console.log('删除', params.row);

                                        this.$Modal.confirm({
                                            title: '提示',
                                            content: '<p>确认删除吗？</p>',
                                            onOk: () => {
                                                let postData = {
                                                    role_id: params.row.id
                                                };

                                                this.util.post('/hand/deleteRole', postData, 'formdata').then(res => {
                                                    if(res.status == 200) {
                                                        this.$Message.success(res.msg);
                                                        this.getRoleList();
                                                    } else {
                                                        this.$Message.warning(res.message)
                                                    }
                                                })
                                            },
                                        });
                                    }
                                }
                            }, '删除');
                            return h('div', [edit, del]);
                        }
                    },
                ],

            }
        },
        created() {
            // this.getList();
            this.getRoleList();
        },
        mounted() {
            let mainContent = document.getElementById('mainContent')
            if(mainContent) {
                this.tableHeight =  mainContent.offsetHeight - 40
            }
            this.timer = setInterval(() => {
                if(mainContent) {
                    this.tableHeight =  mainContent.offsetHeight - 40
                } else {
                    mainContent = document.getElementById('mainContent')
                }
            }, 1000)
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        methods: {

            getRoleList() {

                let postData = {
                    // pageSize: 200,
                    // pageNum: 1,
                };
                this.util.get('/hand/roleInf', postData).then(res => {
                    console.log('获取列表', JSON.parse(JSON.stringify(res)))
                    this.roleList = res.data || [];

                })
            },

            addItem() {
                this.itemModal = true;
                this.itemData = {
                    "role_name": '',
                    "role_remark": '',
                };
            },
            editItem(item) {
                console.log('item', item);

                this.itemModal = true;
                this.itemData = {
                    id: item.id,
                    "role_name": item.role_name,
                    "role_remark": item.role_remark,
                };
            },

            confirm() {
                let itemData = this.itemData;

                if(!itemData.role_name) {
                    this.$Message.warning('请输入角色名称');
                    return;
                }
                if(!itemData.role_remark) {
                    this.$Message.warning('请输入角色备注');
                    return;
                }


                let postData = {
                    "role_name": itemData.role_name,
                    "role_remark": itemData.role_remark,
                };

                let url = '/hand/createRoleInf';
                if(itemData.id) {
                    postData.id = itemData.id;
                    url = '/hand/createRoleInf';
                }

                this.util.post(url, postData).then(res => {
                    if(res.status == 200) {
                        this.$Message.success(res.msg);
                        this.getRoleList();
                        this.itemModal = false;
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })

            },
        },
    }
</script>

